import React from 'react'
import {Link} from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import Nav from '../../../components/nav'
import utils from '../../../common/utils'
import history from '../../../history'

class Layout extends React.Component {

    componentDidUpdate() {
        this.updateHeight()
    }

    updateHeight() {
        let winH = window.innerHeight,
            divTop = document.getElementsByClassName('my-list')[0].getBoundingClientRect().top,
            divH = document.getElementsByClassName('my-list')[0].clientHeight,
            divZ = winH - divTop - 127
        console.log(divH, divZ)
        divH > divZ ? document.getElementsByClassName('my-list')[0].style.height = divZ+"px" : document.getElementsByClassName('my-list')[0].style.height = 'auto'
    }
    renderTabTitle() {
        return (
            <div class="row text-center nav">
                <NavLink to='/my-project/publish' activeClassName="first" exact className="col-xs-4" replace={true}>
                我发布的
                </NavLink>
                <NavLink to='/my-project/grab' activeClassName="first" exact className="col-xs-4" replace={true}>
                我抢单的
                </NavLink>
                <NavLink to='/my-project/execute' activeClassName="first" exact className="col-xs-4 " replace={true}>
                我执行的
                <i className='iconfont icon-sousuo'></i>
                </NavLink>
                
            </div>
        )
    }
    render() {
        const { children, permission: {is_publish, is_execute} } = this.props,
            tab = window.location.pathname.split('/').pop()
        return (
            <div>
                <div className="container">
                    <div className="box">
                        <div class="Ibox clearfix">
                            {this.renderTabTitle()}
                        </div>

                        <div className="row" style={{display: 'none'}}>
                            <div className='hr'/>
                        </div>

                        <div className="row">
                            <div className='hr'/>
                            {children}
                        </div>
                           
                        {
                            (!is_publish&&tab=='publish' || !is_execute&&tab!='publish') ? null :
                        <div className="p-btns">
                            <Link to='/new-project' className="release">发布新项目</Link>
                            <a href="/contacts" className="contact">联系</a>
                        </div>
                        }
                        
                    </div>
                </div>
                <Nav/>
            </div>
        )
    }
}

export default Layout